<template>
    <div class="menu-main" default-active="1">
        <div class="top-level-menu">
            <div class="t-level-box" :style="{ backgroundColor: this.$store.state.theme.interface.color.mainMenuBagColor }">
                <div class="logo-box">
                    <img src="../.././assets/img/login.png" alt="">
                </div>
                <div class="t-menu-group" :style="`--mainHoverMenuBagColor: ${mainHoverMenuBagColor};`">
                    <div class="t-menu-row" v-for="item in this.$store.state.menu.menuData.menu.data" :key="item.id"
                        :class="activeId == item.id ? 't-menu-row-active' : ''" @click="clickMenu(1, item)">
                        <i :class="item.icon"></i>
                        <span>{{ item.name
                        }}</span>
                    </div>
                    <!-- <div class="t-menu-row">
                        <i class="el-icon-house"></i>
                        <span>主页2</span>
                    </div>
                    <div class="t-menu-row">
                        <i class="el-icon-house"></i>
                        <span>主页2</span>
                    </div>
                    <div class="t-menu-row">
                        <i class="el-icon-house"></i>
                        <span>主页2</span>
                    </div> -->
                </div>
            </div>
        </div>

        <div class="sub-menu">
            <div class="s-menu-box">
                <div class="top-menu-name-box">
                    {{ activeMenuName }}
                </div>
                <div class="s-menu-group" v-for="item in this.$store.state.menu.menuData.siderMenu.data" :key="item.id">
                    <div class="s-menu-row" :class="siderActiveId == item.id ? 's-menu-row-active' : ''"
                        @click="clickMenu(2, item)">
                        <span>{{ item.name }}</span>
                        <i :class="(item.id == siderOpenId && siderIsOpen) ? 'el-icon-arrow-down' : 'el-icon-arrow-left'"
                            v-show="item.son_menu.length > 0"></i>
                    </div>

                    <el-collapse-transition>
                        <div class="s-menu-item" v-show="item.id == siderOpenId && siderIsOpen">
                            <span
                                :class="(siderOpenId == item.id && sonMenuActiveId == sonMenu.id) ? 's-menu-row-active' : (siderActiveId == item.id && sonMenuActiveId == 0 && index == 0 ? 's-menu-row-active' : '')"
                                v-for="(sonMenu, index) in item.son_menu" :key="sonMenu.id"
                                @click="clickMenu(3, sonMenu, item.id)">{{ sonMenu.name }}</span>
                        </div>
                    </el-collapse-transition>

                    <!-- <div class="s-menu-item" v-show="siderActiveId == item.id && siderIsOpen">
                        <span
                            :class="(siderActiveId == item.id && sonMenuActiveId == sonMenu.id) ? 's-menu-row-active' : (siderActiveId == item.id && sonMenuActiveId == 0 && index == 0 ? 's-menu-row-active' : '')"
                            v-for="(sonMenu, index) in item.son_menu" :key="sonMenu.id">{{ sonMenu.name }}</span>
                    </div> -->

                </div>
                <!-- <div class="p-menu-name-box">
                    <span>主页 {{ this.$store.state.menu.defalutSelectMenuIndex }}</span>
                </div>
                <div class="s-menu-group">
                    <div class="s-menu-row">
                        <span>优惠券</span>
                        <i class="el-icon-arrow-down"></i>
                    </div>
                    <div class="s-menu-item">
                        <span>优惠券列表</span>
                        <span>用户领取记录</span>
                    </div>
                </div>
                <div class="s-menu-group">
                    <div class="s-menu-row">
                        <span>积分管理</span>
                        <i class="el-icon-arrow-left"></i>
                    </div>
                </div>
                <div class="s-menu-group">
                    <div class="s-menu-row">
                        <span>抽奖管理</span>
                        <i class="el-icon-arrow-left"></i>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "x-menu",
    data() {
        return {
            isCollapse: false,
            mainHoverMenuBagColor: this.$store.state.theme.interface.color.mainHoverMenuBagColor,
            screenHeight: document.documentElement.clientHeight + 'px'
        };
    },
    methods: {
        clickMenu(type, menuInfo) {
            this.$store.commit('clickMenu', {
                'type': type,
                'menuInfo': menuInfo,
                'clickMenuIsOpenSideMenu': this.$store.state.theme.interface.other.clickMenuIsOpenSideMenu
            });

            this.$router.push(`/views${menuInfo.path}`);
        }
    },
    computed: {
        activeId() {
            return this.$store.state.menu.menuData.menu.activeId;
        },
        activeMenuName() {
            return this.$store.state.menu.menuData.menu.activeMenuName;
        },
        siderActiveId() {
            return this.$store.state.menu.menuData.siderMenu.activeId
        },
        sonMenuActiveId() {
            return this.$store.state.menu.menuData.sonMenu.activeId;
        },
        siderIsOpen() {
            return this.$store.state.menu.menuData.siderMenu.isOpen;
        },
        siderOpenId() {
            return this.$store.state.menu.menuData.siderMenu.openId;
        },
        siderIsActive() {
            return this.$store.state.menu.menuData.siderMenu.isActive;
        }
    }

}
</script>

<style scoped lang="less">
.menu-main {
    width: 220px;
    height: 100%;
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .top-level-menu {
        width: 80px;
        height: 100%;
        color: #ffffff;
        background-color: #282C34;
        display: flex;
        // align-items: center;
        align-items: left;
        box-shadow: 2px 2px 5px 5px #A6A6A6;

        .t-level-box {
            .logo-box {
                height: 50px;

                img {
                    width: 65px;
                    height: 45px;
                    border-radius: 50%;
                }
            }

            .t-menu-group {
                .t-menu-row {
                    width: 80px;
                    height: 50px;
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    padding-left: 10px;
                    box-sizing: border-box;
                    transition: all 0.5s;

                    // background-color: #1890FF;
                    span {
                        margin-left: 5px;
                    }

                    &:hover {
                        // background-color: var(--bgDarkBlue);
                        background-color: var(--mainHoverMenuBagColor);
                        cursor: pointer;
                    }
                }

                .t-menu-row-active {
                    background-color: var(--mainHoverMenuBagColor);
                }
            }
        }
    }

    .sub-menu {
        width: 140px;
        height: 100%;
        color: #515A6E;
        display: flex;
        // align-items: center;
        align-items: left;
        margin-left: 10px;

        .s-menu-box {
            .top-menu-name-box {
                font-size: 18px;
                font-weight: 600;
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-indent: -60px;
            }

            .p-menu-name-box {
                width: 140px;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-weight: 700;
                border-bottom: 1px solid #F2F2F2;
                text-align: left;
                text-indent: 25px;
            }

            .s-menu-group {
                width: 140px;
                min-height: 50px;
                line-height: 50px;
                // margin-top: 15px;
                // border-top-right-radius: 35%;
                // box-sizing: border-box;
                // box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6),
                //     -2px -2px 2px rgba(255, 255, 255, 1);
                // transition: all 0.5s;

                .s-menu-row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 15px;
                    transition: all 0.3s;

                    // box-sizing: border-box;
                    // border-top-right-radius: 35%;
                    &:hover {
                        color: #2D8CF0;
                        cursor: pointer;
                    }
                }

                .s-menu-item {
                    box-sizing: border-box;

                    span {
                        text-align: left;
                        display: block;
                        padding-left: 25px;
                    }
                }
            }

            .s-menu-row:hover {
                color: var(--fontDarkBlue);
                cursor: pointer;
                background-color: #F0FAFF;
            }

            span:hover {
                color: var(--fontDarkBlue);
                cursor: pointer;
            }

            .s-menu-row-active {
                color: var(--fontDarkBlue);
                cursor: pointer;
                background-color: #F0FAFF;
            }

            i:hover {
                color: #2D8CF0;
            }
        }
    }
}
</style>